Web Design Responsive Typography - Easily set up sizes to use on every project and save time.
HTML-код
- Опубликовано: 10 фев 2025
- How to set up your web design responsive typography - our most requested video! And we got a new mic so hoping the sound quality is a bit better for you guys.
Here we go over our go-to typography sizing for every single project. Our desktop sizing varies wildly from project to project, but from tablet down to mobile stays at these sizes 9 times out of 10.
Try Webflow with our affilliate link - webflow.grsm.i...
Connect with us:
www.wearetonic...
/ wearestudiotonic
/ we-are-studio-tonic
As junior designer this is type of content is more helpful than you might think, so good to see real projects and not content just made on purpose for RUclips. Thank you for sharing, and looking forward to more videos from you!
Agreed 💯
This is incredibly generous info to share, thank you!
Just fyi I recommend adding all your social links and your website in the description. I always hear how people in this industry get leads through their videos, and I think you'd see a lot more activity come in through youtube if you made those links more accessible.
Thanks for the reminder. I think they’re on all the others just not this one!
Yes! Thanks for this one🙏🏻
You’re welcome!
Hey @wearestudiotonic I am a huge fan and supporter of your channel due to immense quality of your content. I appreciate that you provide real production examples and know-how, without the superfluous fluff. I'll definitely be curious to checkout the design course once it's out.
It’s planned! Just really struggling to find the time to record it!
Great Vid! A downloadable Cheat Sheet or link to a template would be a great lead magnet for you and a fantastic resource for your viewers 🙃
I agree. We’re currently working on our web design course and it will be included in that for sure 👍
Thanks for sharing! I consider myself a beginner in this area, and going through videos like these has been so helpful in breaking down that endless research mentality and just putting something together already 😅 Cheers for that. I’m curious, do you have specific breakpoint sizes you develop for on the three screens: desktop, tablet, and mobile?
Hey, we’re glad you enjoyed the video. Yes we use the default breakpoints set by Webflow (as we are a Webflow exclusive studio). These are desktop 991px and above, tablet 991-767px, mobile landscape 767-478 and mobile portrait 478 and down. We always design our desktop sites at 1440px width with either a 1200px or 1280px container.
Maybe im not getting something here but. Your viewport on the "Check" Frame is 568px. If you then open this in the figma mobile app this obviosly gets scaled to the smarthones viewport. So the h1 for example is not 40px.
THIS TABLE IS VALID FOR VERY FONTS? THANKS
Thanks for sharing ❤
No problem 😊
Question, how do you code the additional typography (Large, Medium, Small and Tiny)? If you’re already using all the H tags and P tag.
You just set these up as classes, and you can apply a class to a tag to override its default styles 👍 So you can have an h2 that looks like an h1, or a paragraph that looks like an h4 for example.
Could you create something like this but for colors? How do you guys set the color library and why. Thanks!
Yep, absolutely 👍
Thank you
You’re welcome!